<%@include file="/WEB-INF/common/taglibs.jsp"%>
<link rel="STYLESHEET" type="text/css"	href="${ctx}/resources/plugin/dhtmlxTree/dhtmlxtree.css">
<script src="${ctx}/resources/plugin/dhtmlxTree/dhtmlxcommon.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/dhtmlxtree.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_ed.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_kn.js"></script>
<script	src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_dragin.js"></script>
<script src="${ctx}/resources/plugin/dhtmlxTree/ext/dhtmlxtree_json.js"></script>
<script src="${ctx}/resources/plugin/dhtmlMenu/dhtmlxmenu.js"></script>
<script src="${ctx}/resources/plugin/dhtmlMenu/ext/dhtmlxmenu_ext.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx}/resources/plugin/dhtmlMenu/skins/dhtmlxmenu_dhx_skyblue.css">
<script type="text/javascript"> 
var tree
 
$(document).ready(function() {
	var drop_target ;
	var right_click;
	var cache_value;
	var menu1 = new dhtmlXMenuObject();
	tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
	menu1.renderAsContextMenu();
	menu1.setIconsPath("${ctx}/resources/plugin/common/imgs/");
	menu1.addNewChild(menu1.topId, 0, "i18n", "I18N", false, "opens.gif");
	menu1.addNewChild(menu1.topId, 0, "open", "Open", false, "opens.gif");
	menu1.addNewChild(menu1.topId, 0, "edit", "Edit", false, "edit.gif");
	menu1.addNewChild(menu1.topId, 0, "up", "Up", false, "up.gif");
	menu1.addNewChild(menu1.topId, 1, "down", "Down", false, "down.gif");
	menu1.addNewChild(menu1.topId, 3, "delete", "Delete", false, "delete.gif");
	menu1.attachEvent("onClick", function(id, zoneId) {
		if ('up' === id){
			tree.moveItem(right_click,'up');
 		}else if ('down' === id){
			tree.moveItem(right_click,'down');
		}else if ('delete' === id){
			deleteMenu(right_click);		
   		}else if ('open'=== id){
		    openMenu(right_click);
   	   	}else if ('edit'=== id){
		    editMenu(right_click);
   	   	}else if ('i18n' === id){
	   	   	showLanguage(right_click);
   	    }
 	});
	tree.enableContextMenu(menu1);
 	tree.setSkin('dhx_skyblue');
	tree.setImagePath("${ctx}/resources/plugin/dhtmlxTree/imgs/csh_vista/");
	tree.enableDragAndDrop(1);
	tree.enableDragAndDrop(true);
	tree.enableItemEditor(true);
	tree.setDragHandler(tondrag);
	tree.makeAllDraggable(newMenu);
	tree.enableKeyboardNavigation(true);
	tree.setDataMode("json");
	tree.attachEvent("onDrop", function(sId,tId,id,sObject,tObject){
		var childrens = tree.Fx(tId);
		
		var rank =new Array();
		$.each(childrens.split(','),function(index,value){
			
			if (tId == tree.getParentId(value)){
				rank.push(value);
	 		}
		});

		$.ajax({
			url : "${ctx}/menu/"+tId+"/rank/",
			type : "POST",
			data : {'rank' : rank},
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
				johnny.info("update menu name successfully");
				}
			}
		});	



	});
    tree.attachEvent("onRightClick", function(id, object){
   	right_click = id;
    });
	tree.attachEvent("onEdit", function(state,id,tree,value){
 	if (id<0){
		return value;
	}
	if (state ==0){
		cache_value = value;
 		return value;
	}
 	if (state==2 && value!=cache_value){
	$.ajax({
		url : "${ctx}/menu/"+id+"/edit/",
		type : "POST",
		data : {'name' : value},
		dataType : "json",
		success : function(data){		
			if(data && data.state && (data.state.indexOf("ERROR") != -1)){
				johnny.error(data.message);
				return;
			}else{
			johnny.info("update menu name successfully");
			}
		}
	});
	
	}
	return value;
});
tree.loadJSON("${ctx}/menu-group/${menuGroup.id}/tree/");
$('#confirmMenu').click(function(){

	var	parentId = 	$('#parentId').val();
 	if (parentId < 0){

		parentId = 0;
 	 }
	var index = tree.hasChildren(parentId)+1;
	$('#rankOrder').val(index);
	$.ajax({
		url : "${ctx}/menu/create/",
		type : "PUT",
		data : $('#menuForm').serialize(),
		dataType : "json",
		success : function(data){		
			if(data && data.state && (data.state.indexOf("ERROR") != -1)){
				johnny.error(data.message);
				return;
			}else{
				tree.deleteItem(-1);
				
				var entity = data.entity;
				var pid = 0;
				if (entity.father){
					pid = entity.father.id;
				}
				tree.insertNewItem(pid,entity.id,entity.name,0,0,0,0,"SELECT,CALL");
				$("#newGroup").modal('hide');
				johnny.info("create new menu successfully");
				}
		}
	});

});


$('#confirmLanguage').click(function(){
	var menuId = $('#menuId').val();
	var ids = new Array();
	var values = new Array();
	$('.language').each(function(){
		var val = $(this).val();
		if (val){
		ids.push($(this).attr('name'));
		values.push(val);
		}
	});
	var url = "${ctx}/menu/"+menuId+"/language/";
	$.ajax({
		url : url,
		type : "POST",
		data : {'ids' :ids,'values' :values},
		dataType : "json",
		success : function(data){		
			if(data && data.state && (data.state.indexOf("ERROR") != -1)){
				johnny.error(data.message);
				return;
			}else{
				tree.deleteItem(-1);
				
				var entity = data.entity;
				var pid = 0;
				if (entity.father){
					pid = entity.father.id;
				}
				tree.insertNewItem(pid,entity.id,entity.name,0,0,0,0,"SELECT,CALL");
				$("#newGroup").modal('hide');
				johnny.info("create new menu successfully");
				}
		}
	});

});



});

function deleteMenu(id){
	var url = "${ctx}"+"/menu/"+id+"/delete/";
	$.ajax({
		url : url,
		type : "DELETE",
		dataType : "json",
		success : function(data){		
		if(data && data.state && (data.state.indexOf("ERROR") != -1)){
		johnny.success(data.message);
 			return;
		}else{
			tree.deleteItem(id,true);
	 		johnny.info("update menu  successfully");
			}
		}
	});

	
} 

function openMenu(id){
	var url = "${ctx}"+"/menu/"+id+"/url/";
	$.ajax({
		url : url,
		type : "GET",
		dataType : "json",
		success : function(data){		
		if(data && data.state && (data.state.indexOf("ERROR") != -1)){

 		return;
		}else{
	    	var viewOrderUrl = mnc.ctx + "/"+data.entity;
	    	console.dir(viewOrderUrl);
	        window.open(viewOrderUrl, "View Index", "scrollbars=no,toolbar=no,menubar=no,resizable=yes");
			}
		}
	});
	
}

function editMenu(id){
	var url = "${ctx}"+"/menu/"+id+"/url/";
	$.ajax({
		url : url,
		type : "GET",
		dataType : "json",
		success : function(data){		
		if(data && data.state && (data.state.indexOf("ERROR") != -1)){

 		return;
		}else{
	    	var viewOrderUrl = mnc.ctx + "/24k-editor/"+data.entity;
	     
	        window.open(viewOrderUrl, "View Index", "scrollbars=no,toolbar=no,menubar=no,resizable=yes,height=400, width=400");
			}
		}
	});
	
}






function showLanguage(id){
 	$("#menuId").val(id);
	$.ajax({
		url : "${ctx}"+"/menu/"+id+"/language/",
		type : "GET",
		dataType : "json",
		success : function(data){		
		if(data && data.state && (data.state.indexOf("ERROR") != -1)){
		johnny.success(data.message);
 		return;
		}else{
 			$.each(data.entity,function(val , index){
				$('#lg-'+this.language.lg).val(this.name);
			});
			$("#languages").modal('show');
		}
		}
	});
 	

	
}






function newMenu(drop_obj,source_id,target_on,target_before,target_now){
 	$('#parentId').val(target_on);
	$('#channelId').val($('#'+source_id).attr("channel-id"));
	$('#menu-name').val($('#'+source_id).attr("channel-name"));
	$("#newGroup").modal('show');

}	
 

function tondrag(id, id2) {
	console.dir("tondrag");
	var child = id;
	var parent = id2;
	
	var url = "${ctx}"+"/menu/"+id+"/edit/"+parent;
	$.ajax({
			url : url,
			type : "PUT",
			dataType : "json",
			success : function(data){		
			if(data && data.state && (data.state.indexOf("ERROR") != -1)){
			johnny.success(data.message);
	 		return;
			}else{
			johnny.info("update menu  successfully");
 			}
			}
		});
		return true;
 };

</script>

<div class="row-fluid">
<div class="span12">
<div class="centerContent">
<div class="span12">

<div id="treeboxbox_tree" class="span4" style="min-height: 200px;"></div>
<div id="drop_tree" class="span8  row-fluid">
<c:set var="allEntity" value="${requestScope.channels}" />
<c:set var="num" value="${fn:length(allEntity)/2}" />

<div class="span6 categories row-fluid">
<ul style="list-style-type: none;">

	<c:if test="${allEntity!=null}">
		
		<c:forEach var="entity" items="${allEntity}" varStatus="status">
			<c:if test="${num ge status.index}">
 			<div dragInDhtmlXTree="true" id="channel_${entity.id}" channel-name="${entity.name}" channel-id="${entity.id}">
			<li><span class="icon16 icomoon-icon-folder"></span><a href="#">${entity.name}</a></li>
			</div>
			</c:if>
		</c:forEach>
		
		
</c:if>
</ul>
</div>
<div class="span6 categories row-fluid">
<ul style="list-style-type: none;">

	<c:if test="${allEntity!=null}">
		
		<c:forEach var="entity" items="${allEntity}" varStatus="status">
			<c:if test="${num lt status.index}">
 			<div dragInDhtmlXTree="true" id="channel_${entity.id}" channel-name="${entity.name}" channel-id="${entity.id}">
			<li><span class="icon16 icomoon-icon-folder"></span><a href="#">${entity.name}</a></li>
			</div>
			</c:if>
		</c:forEach>
		
		
</c:if>
</ul>
</div>



</div>
</div>


</div>
</div>
</div>
<div id="newGroup" class="modal hide fade" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>New Menu</h3>
	</div>
	<div class="modal-body">
 				<form method="post" id="menuForm">
 						<input type="hidden" name="menuGroupId" value="${menuGroup.id}">
 						<input id="parentId" type="hidden" name="parentId">
 						<input id="channelId" type="hidden" name="channelId">
 						<input id="rankOrder" type="hidden" name="rankOrder">
						<div class="form-row row-fluid">
							<label class="form-label span4">Name</label>
							<input id="menu-name" class="span8" name="name" />
						</div>
						<div class="form-row row-fluid">
							<label class="form-label span4">Description</label>
							<input class="span8" name="description"  />
						</div>
				</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" id ="confirmMenu" class="btn btn-primary">Save changes</a>
	</div>
</div>

<c:set var="allLanguage" value="${requestScope.languages}" />
<c:if test="${allLanguage!=null}">
<div id="languages" class="modal hide fade" style="display: none; ">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">
			<span class="icon12 minia-icon-close"></span>
		</button>
		<h3>Language setting</h3>
	</div>
	<div class="modal-body">
 				<form method="post" id="menuForm">
 						<input type="hidden" id="menuId" name="menuId" >
					<c:forEach var="entity" items="${allLanguage}">
 						<div class="form-row row-fluid">
							<label class="form-label span4">${entity.language}</label>
							<input id="lg-${entity.lg}" class="span8 language"  name="${entity.id}" />
						</div>
					</c:forEach>
				</form>
	</div>
	<div class="modal-footer">
		<a href="#" class="btn" data-dismiss="modal">Close</a>
		<a href="#" id ="confirmLanguage" class="btn btn-primary">Save changes</a>
	</div>
</div>
</c:if>



